import { ref, onMounted, onUnmounted, Ref } from 'vue'
// 用于检查是否点击了下拉框的外部区域

// 变量要设置成与ref同名称才可以拿到ref，设置成null | HTMLElement的联合类型
const useClickOutside = (dropdownRef: Ref<null | HTMLElement>) => {
  const isClickOutside = ref(false) // 初始值设置为fasle
  // 组件点击外部区域自动隐藏思路:
  // 1、在mounted的时候添加click事件，在unmounted的时候将事件删除
  // 2、拿到Dropdown的DOM元素从而判断，点击的内容是否被这个元素包含
  // 注意：在setup中无法使用this.$ref获取元素节点，vue3提供了一个新的API:就是创建一个新的对象，跟ref同名，再return出去
  const hander = (e: MouseEvent) => {
    // 判断节点是否存在
    if (dropdownRef.value) {
      // 判断点击的内容是否被这个元素（下拉菜单）包含
      // Node.contains() 用于检测()内给的节点是不是Node节点的子节点。
      if (dropdownRef.value.contains(e.target as HTMLElement)) {
        isClickOutside.value = false
      } else {
        isClickOutside.value = true
      }
    }
  }
  onMounted(() => {
    document.addEventListener('click', hander)
  })
  onUnmounted(() => {
    document.addEventListener('click', hander)
  })
  return isClickOutside
}
export default useClickOutside
